<template>
	<div class="zhuti">
		<mt-header title="确认订单" id='top'>
			<router-link to="/diancan" slot="left">
				<mt-button icon="back"></mt-button>
			</router-link>
			<!-- <mt-button icon="more" slot="right"></mt-button> -->
		</mt-header>
		<!-- 选择预计到达时间段和选择就餐人数-->
		<div class="sjrs">
			<!-- 选择预计到达时间 -->
			<div class="shijian">
				<img src="@/components/img/jiesuanshijian.png" alt="" class='sjrrs'>
				<span class='qwezxc' @click="shijian">选择预计到达时间&nbsp;&nbsp;{{pickerValue}}<img src="@/components/img/jiesuanxuanz.png" alt="" class='xz'></span>
				
			</div>
			<!-- 下划线 -->
			<div class="xhx"></div>
			<!-- 选择就餐人数 -->

			<div class="shijian">
				<img src="../../img/jiesuanrenshu.png" alt="" class='sjrrs'>
				<span class='qwezxc'>请选择就餐人数&nbsp;&nbsp;{{msg1}} <img src="@/components/img/jiesuanxuanz.png" alt=""  class='xz1'></span>
			</div>
		</div>
			<!-- 确认订单的商品 -->
			<div class="dingdanshangpin">
				<!-- 产品名 -->
				<h4 class="yskf">悠时咖啡</h4>
				<!-- 下划线 -->
				<div class="xhx"></div>
				<div class="cp">
					<img src="../../img/shangp.png" alt="" class="shangpin">
					<span class="shangpinmingcheng">卡布奇诺  <span>¥4.5</span> </span>
					<p class="shangpinshuliang">X1</p>
				</div>
				<div class="xhx"></div>
				<div class="jiner">
					<span class="xiaoji">小计:</span>
					<span class="jiner_heji">¥4.5</span>
				</div>
			</div>
			<!-- 支付方式和订单备注和发票 -->
			<ul class="zhifu">
				<!-- 支付方式 -->
				<li class="zffangshi">
					<span class="zffangshi_1">支付方式</span>
					<span class="zaixianzf">在线支付</span>
					<div class="xhx1"></div>
				</li>
				<!-- 订单备注 -->
				<li class="dingdanbeiz" @click="beizu">
					<span class="zffangshi_2">订单备注</span>
					<span class="yans">口味,偏好等要求</span>
					<img src="../../img/jiesuanxuanz.png" alt="" class="tpxuanz">
				</li>
				<!-- 发票 -->
				<li >
					<div class="xhx1"></div>
					<div class="dingdanbeiz_1">
						<span class="zffangshi_3">发票</span>
						<span class="yans_1">未选择</span>
					</div>
				</li>
			</ul>
			<br>
			
			<br>
			
			<!-- 支付 -->
			<div class="dingweidi">
				<div class="manjian">满减优惠与折扣商品不能同享</div>
				<div class="xiadan">
					<div class="jinerddd">
						<span class="yiyouhui">以优惠</span>
						<span class="youhuijinere">￥0.0</span>
						<span class="daizhifu">待支付</span>
						<span class="zhifujiner">¥4.5</span>
						<!-- 下单	 -->
					</div>
					<div class="lijixiaduan">立即下单</div>
				</div>
				
			</div>
			<!-- 选择时间 -->
			 <mt-datetime-picker
				
			    ref="picker"
			    type="time"
			    v-model="pickerValue"
				
				>
			  </mt-datetime-picker>
			  <!--  -->
				
			  
	</div>
</template>

<script>
	import { DatetimePicker } from 'mint-ui';
	// Vue.component();
	
	export default{
		components: {
			 DatetimePicker
		},
		data() {
			return{
				pickerValue:'',
				msg:'',
				msg1:'',
				value:'123',
				pickerVisible:'asd'
			}
		},
		methods:{
			shijian(){
				 this.$refs.picker.open();
			},
			 openPicker() {
			       
					
			      },
			beizu(){
				this.$router.push('/jiesuanbeizu')
			}	
		}
	}
</script>

<style lang="less" scoped>
	.zhuti{
		background: #f0f0f0;
		position: relative;
		// width: 411.4px;
	}
	.sjrs {
		margin-left: 7.3%;
		margin-top: 7.3%;
		width: 86%;
		height: 43.7%;
		line-height: 4.8%;
		border-radius: 1.9%;
		text-align: left;
		background: #fff;
		
	}

	#top {
		background-color: #fff;
		color: black;
	}

	.shijian {
		// height: 17.2%;
		height: 71px;
		// line-height: 17.2%;
		line-height: 71px;
	}

	.xz {
		// padding-left: 36.4%;
		position: absolute;
		left: 195px;
		top: -3px;
	}

	.xz1 {
		// padding-left: 40.1%;
		position: absolute;
		left: 195px;
		top: -3px;
	}

	.sjrrs {
		padding-left: 6%;
		margin-right: 2.4%;
	}
	.dingdanshangpin{
		margin-left: 7.3%;
		margin-top: 4.8%;
		width: 86.2%;
		// height: 50.1%;
		height: 190px;
		// line-height: 4.8%;
		line-height: 20px;
		border-radius: 2%;
		text-align: center;
		background: #fff;
	}
	.yskf{
		padding-top: 2.4%;
		padding-left: 4.8%;
		// height: 3.4%;
		height: 14px;
		font-size: 3.4px;
		text-align: left;
		font-family: PingFangSC-regular;
	}
	.xhx{
		border-bottom:1px solid #dee1e6 ;
		width: 81.4%;
		// padding-left: 0.24%;
		margin-left: 6%;
		// padding-top:0.24% ;
		padding-top:10px ;
	}
	.cp{
		text-align: left;
		display: flex;
		p{
			width: 70%;
		}
		span{
			width: 70%;
			span{
				margin-left: 100px;
			}
		}
		
	}
	.shangpin{
		// margin-right: 300px;
		margin-top: 0.24%;
		padding-left: 4.86%;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-right:4%
		
		
	}
	.shangpinmingcheng{
		margin-top: 2.4%;
		padding-left: 4.86;
		font-size: 2.9%;
		
	}
	.shangpinmingchengjiage{
		margin-top: 2.4%;
		padding-left: 41.3%;
		font-size: 3.6%;
		font-weight: 600;
	}
	.shangpinshuliang{
		margin-top: 7.2%;
		margin-left: -58.3%;
		font-size: 12px;
	}
	.jiner{
		height: 51px;
		// line-height: 8.5%;
		line-height: 35px;
	}
	.xiaoji{
		// padding-top: 10px;
		margin-left: 60.7%;
		font-size: 15px;
	}
	.jiner_heji{
		color: red;
	}
	.zhifu{
		// margin-right: 7.2%;
		// width: 76.5%;
		width: 86.2%;
		height: 175px;
		// line-height: 4.86%;
		line-height: 20px;
		border-radius: 1.9%;
		text-align: center;
		background: #fff;
		padding-left: 8%;
		box-sizing: border-box;
		margin-left: 7.3%;
		    margin-top: 4.8%;
			margin: auto;
			
	}
	.zffangshi{
		// line-height: 0.97%;
		line-height: 40px;
	}
	.zffangshi_1{
		margin-right:34% ;
		margin-top: 2.4%;
		color: #878787;
	}
	.qwezxc{
		color: red;
		position: relative;
	}
	.zaixianzf{
		color: #000;
	}
	.xhx1{
		border-bottom:1px solid #dee1e6 ;
		width: 66.8%;
		padding-left: 22.4%;
		padding-top:2.4%;
	}
	.zffangshi_2{
		margin-left: 4.8%;
		margin-right: 18.2%;
		// margin-right:60px ;
		// margin-top: 10px;
		color: #878787;
	}
	.yans{
		
		color: #878787;
	}
	.yans_1{
		position: absolute;
		top: 0;
		left: 170px;
		color: #878787;
	}
	.tpxuanz{
		// margin-top: 10px;
	}
	.dingdanbeiz{
		margin-top: 4.8%;
		// height: 20px;
	display: flex;
	}
	.zffangshi_3{
		position: absolute;
		top: 0px;
		left: 25px;
		// margin-left: 4.8%;
		// margin-right: 36.4%;
		// // margin-right:60px ;
		// color: #878787;
	}
	.dingdanbeiz_1{
		display: flex;
		margin-top: 2.43%;
		position: relative;
	}
	.manjian{
		// height: 4.3%;
		height: 18px;
		// line-height: 4.86%;
		line-height: 20px;
		background-color: rgba(255, 197, 115, 74);
		// width: 100%;
	}
	.youhui{
		display: flex;
	}
	.jinerddd{
		height: 38px;
		background-color: rgba(58, 46, 47, 100);
		line-height: 38px;
		// margin-right: 14px;
		width: 100%;
	}
	.yiyouhui{
		color: rgba(158, 166, 183, 50);
		font-size: 15px;
		text-align: left;
		margin-left: 2.4%;
		// width: 100%;
	}
	.youhuijinere{
		height: 14px;
		color: rgba(158, 166, 183, 50);
		font-size: 15px;
		margin-right: 27.7%;
		// width: 100%;
	}
	.zhifujiner{
		height: 14px;
		color: #fff;
		font-size: 15px;
		margin-left: 7.2%;
		margin-right: 2.4%;
	}
	.daizhifu{
		height: 14px;
		color:#fff;
		font-size: 15px;
	}
	.lijixiaduan{
		width: 23%;
		height: 38px;
		// line-height: 20px;
		background-color: rgba(255, 59, 0, 100);
		color: #fff;
		font-size: 14px;
		text-align: center;
		line-height: 38px;
	}
	.xiadan{
		display: flex;
	}
	.dingweidi{
		position: absolute;top: 100%;
		width: 100%;
	}
</style>
